<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../../common/reset.css">
    <link rel="stylesheet" href="../../../common/jquery.dataTables.css">
    <link rel="stylesheet" href="../../../common/table.css">
    <title>Document</title>
    <style>
        /* th,
        td {
            white-space: nowrap;
        }

        div.dataTables_wrapper {
            width: 100%;
            margin: 0 auto;
        } */
    </style>
</head>

<body>
    <div class="wxl_table_box">
        <table id="example" class="stripe row-border order-column" style="width:100%">
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                    <th>First name</th>
                    <th>Last name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                    <th>Extn.</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script src="../../../common/jquery.min.js"></script>
    <script src="../../../common/jquery.dataTables.js"></script>
    <script src="../../../common/dataTables.fixedColumns.js"></script>
    <script>
        $(document).ready(function () {
            var data = [{
                    "carNum": "1",
                    "carCode": "2",
                    "carType": "3",
                    "Suborders": "4",
                    "brandModel": "5",
                    "xZdivisions": "6",
                    "carAddress": "7",
                    "zgTaxsuo": "主管",
                    "filingTime": "8",
                    "engineNum": "10",
                    "invoiceDate": "11",
                    "useNature": "12",
                    "fuelType": "13",
                    "exhaustVolume": "14",
                    "passenger": "15",
                    "quality": "16",
                    "logoutDate": "17"
                },
                {
                    "carNum": "1",
                    "carCode": "2",
                    "carType": "3",
                    "Suborders": "4",
                    "brandModel": "5",
                    "xZdivisions": "6",
                    "carAddress": "7",
                    "zgTaxsuo": "主管",
                    "filingTime": "8",
                    "engineNum": "10",
                    "invoiceDate": "11",
                    "useNature": "12",
                    "fuelType": "13",
                    "exhaustVolume": "14",
                    "passenger": "15",
                    "quality": "16",
                    "logoutDate": "17"
                },
                {
                    "carNum": "1",
                    "carCode": "2",
                    "carType": "3",
                    "Suborders": "4",
                    "brandModel": "5",
                    "xZdivisions": "6",
                    "carAddress": "7",
                    "zgTaxsuo": "主管",
                    "filingTime": "8",
                    "engineNum": "10",
                    "invoiceDate": "11",
                    "useNature": "12",
                    "fuelType": "13",
                    "exhaustVolume": "14",
                    "passenger": "15",
                    "quality": "16",
                    "logoutDate": "17",
                },
                {
                    "carNum": "1",
                    "carCode": "2",
                    "carType": "3",
                    "Suborders": "4",
                    "brandModel": "5",
                    "xZdivisions": "6",
                    "carAddress": "7",
                    "zgTaxsuo": "主管",
                    "filingTime": "8",
                    "engineNum": "10",
                    "invoiceDate": "11",
                    "useNature": "12",
                    "fuelType": "13",
                    "exhaustVolume": "14",
                    "passenger": "15",
                    "quality": "16",
                    "logoutDate": "17",
                },
                {
                    "carNum": "1",
                    "carCode": "2",
                    "carType": "3",
                    "Suborders": "4",
                    "brandModel": "5",
                    "xZdivisions": "6",
                    "carAddress": "7",
                    "zgTaxsuo": "主管",
                    "filingTime": "8",
                    "engineNum": "10",
                    "invoiceDate": "11",
                    "useNature": "12",
                    "fuelType": "13",
                    "exhaustVolume": "14",
                    "passenger": "15",
                    "quality": "16",
                    "logoutDate": "17",
                },
                {
                    "carNum": "1",
                    "carCode": "2",
                    "carType": "3",
                    "Suborders": "4",
                    "brandModel": "5",
                    "xZdivisions": "6",
                    "carAddress": "7",
                    "zgTaxsuo": "主管",
                    "filingTime": "8",
                    "engineNum": "10",
                    "invoiceDate": "11",
                    "useNature": "12",
                    "fuelType": "13",
                    "exhaustVolume": "14",
                    "passenger": "15",
                    "quality": "16",
                    "logoutDate": "17"
                }
            ]
            var table = $('#example').DataTable({
                "data": data,
                "columns": [{
                        "data": "carNum"
                    },
                    {
                        "data": "carCode"
                    },
                    {
                        "data": "carType"
                    },
                    {
                        "data": "Suborders"
                    },
                    {
                        "data": "brandModel"
                    },
                    {
                        "data": "xZdivisions"
                    },
                    {
                        "data": "carAddress"
                    },
                    {
                        "data": "zgTaxsuo"
                    },
                    {
                        "data": "filingTime"
                    },
                    {
                        "data": "engineNum"
                    },
                    {
                        "data": "invoiceDate"
                    },
                    {
                        "data": "useNature"
                    },
                    {
                        "data": "fuelType"
                    },
                    {
                        "data": "exhaustVolume"
                    },
                    {
                        "data": "passenger"
                    },
                    {
                        "data": "quality"
                    },
                    {
                        "data": "logoutDate"
                    }
                ],
                "scrollY": "300px",
                "scrollX": true,
                "info": false,
                "searching": false,
                "scrollCollapse": true,
                "paging": false,
                "fixedColumns": {
                    leftColumns: 2,
                }
            });
        });
    </script>
</body>

</html>